<template>
	<view class="offer" v-show="show">
		<view class="offer-content">
			<view class="offer-top">
				<image class="img-cont" src="../../static/images/yhbg.png" mode=""></image>
			</view>
			<view class="offer-footer" :animation="animationDataFooter">
				<view class="info">
					<view class="info-item " @click="handleRoutquick"
						style="margin-bottom: 30rpx;background-color: #fff;">
						<view class="left">
							单品快卖
						</view>
						<view class="right">
							<u-icon name="arrow-right" color="#333" size="16"></u-icon>
						</view>
					</view>
					<view class="info-item yhq" @click="handleRoute('/couponCenter')">
						<view class="left">
							优惠券
						</view>
						<view class="right">
							<u-icon name="arrow-right" color="#333" size="16"></u-icon>
						</view>
					</view>
					<view class="info-item czg" @click="handleRouteRech(2)">
						<view class="left">
							充值购
						</view>
						<view class="right">
							<u-icon name="arrow-right" color="#333" size="16"></u-icon>
						</view>
					</view>
				</view>
				<view class="close" @click="handleClose">
					<u-icon name="close" color="#333" size="30"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import handleCache from "@/utils/cache.js"

	import {
		ref,
		watch
	} from 'vue'
	import {
		onShow
	} from "@dcloudio/uni-app"

	const props = defineProps({
		show: Boolean
	})

	const emit = defineEmits(['cancle'])

	let animationDataFooter = ref({})

	var animation = uni.createAnimation({
		duration: 400,
		timingFunction: 'ease',
	})
	const showFooter = () => {
		animation.opacity(1).bottom('120rpx').step()
		animationDataFooter.value = animation.export()
	}
	const hideFooter = () => {
		animation.bottom('-100vh').opacity(0).step()
		animationDataFooter.value = animation.export()
	}

	const handleClose = () => {
		hideFooter()
		setTimeout(() => {
			emit('cancle')
		}, 200)

	}
	const handleRoutquick = () => {
		if (!handleCache.get('userInfo')) {
			uni.navigateTo({
				url: '/pages/login/login'
			})
			return
		}
		uni.navigateTo({
			url: "/pages/quicksalelist/quicksalelist"
		})
	}

	const handleRoute = (path) => {
		if (!path) {
			return
		}
		emit('cancle')
		if (!handleCache.get('userInfo')) {
			uni.navigateTo({
				url: '/pages/login/login'
			})
			return
		}
		uni.navigateTo({
			url: `/pages${path}${path}`
		})
	}
	const handleRouteRech = (data) => {
		if (!handleCache.get('userInfo')) {
			uni.navigateTo({
				url: '/pages/login/login'
			})
			return
		}
		uni.navigateTo({
			url: '/pagesA/recharge/recharge?type=' + data
		})
	}
	watch(() => props.show, (newVal, oldVal) => {
		if (newVal) {
			setTimeout(() => {
				showFooter()
			})

		}
	})
</script>

<style lang="scss" scoped>
	.offer {
		position: fixed;
		z-index: 11;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: #F5F5F5;

		.offer-content {
			position: relative;
			width: 100%;
			height: 100%;

			.offer-top {
				position: absolute;
				top: 0;
				width: 100%;

				.img-cont {
					width: 100%;
					height: 535rpx;
				}
			}

			.offer-footer {
				opacity: 0;
				position: absolute;
				bottom: -100vh;
				padding-bottom: env(safe-area-inset-bottom);
				padding-bottom: constant(safe-area-inset-bottom);
				left: 0;
				width: 100%;

				display: flex;
				flex-direction: column;

				align-items: center;

				.info {
					padding: 0 30rpx;

					width: 100%;
					margin-bottom: 60rpx;

					.info-item {
						padding-left: 20rpx;
						height: 120rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						width: 100%;
						border-radius: 16rpx;

						.left {
							font-weight: 500;
						}

						.right {
							padding: 0 15rpx;
						}
					}

					.yhq {

						background-color: #fcf0e4;
					}

					.czg {
						margin-top: 30rpx;
						background-color: #fdf2dc;
					}

				}

				.close {
					background: rgba(255, 255, 255, 0.5);
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
</style>